<template>
	<!-- 单图显示组件 -->
	<view class="imageThreeComponent">
		<view class="image_list" :style="[{'paddingTop': `${newData.pageUpspacing}rpx`,'paddingBottom': `${newData.pageDownspacing}rpx`, 
             'paddingLeft': `${newData.pageLRspacing}rpx`,'paddingRight': `${newData.pageLRspacing}rpx`}]">
			<view class="left" :style="{marginRight: `${newData.pageMiddlespacing / 2}rpx`}">
				<div-base-navigator :pageUrl="newData.leftPageUrl">
					<image :src="newData.leftImageUrl" :style="{height: `${newData.height}rpx`}" class="image"></image>
				</div-base-navigator>
			</view>
			<view class="right" :style="{marginLeft: `${newData.pageMiddlespacing / 2}rpx`}">
				<div-base-navigator :pageUrl="newData.rightTopPageUrl"  class="rightInfo">
					<image :src="newData.rightTopImageUrl" :style="{height: `${newData.height / 2 - 5}rpx`}"
						class="image" style="margin-bottom: 5rpx;"></image>
				</div-base-navigator>
				<div-base-navigator :pageUrl="newData.rightBottomPageUrl"  class="rightInfo">
					<image :src="newData.rightBottomImageUrl" class="right-bottom-image image"
						:style="{height: `${newData.height / 2 - 5}rpx`}" style="margin-top: 5rpx;"></image>
				</div-base-navigator>
			</view>
		</view>
	</view>
</template>

<script>
	// leftImageUrl: '',
	// rightTopImageUrl: '',
	// rightBottomImageUrl: '',
	// leftPageUrl: '',
	// rightTopPageUrl:'',
	// rightBottomPageUrl: '',
	const app = getApp();
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'basic-image',
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						leftPageUrl: ``,
						leftImageUrl: '',
						height: 100,
						rightBottomImageUrl: '',
						rightBottomPageUrl: '',
						rightTopImageUrl: '',
						rightTopPageUrl: ''
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value
			};
		},
		mounted() {
			// console.log(this.value,3222)
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.image_list {
		display: flex;

		.left {
			flex: 1;
			height: 100%;

			.image {
				width: 100%;
			}
		}

		.right {
			flex: 1;
			font-size: 0;

			.rightInfo {
				.image {
					width: 100%;
				}

			}
		}
	}
</style>